/*This file is supporsed to be generated,
 * if you want to modify the style,
 * please edit the scss file with the same file name*/


@font-face
{
    font-family: "Exo-Regular";
    src: url('../fonts/Exo-Regular.otf') format('OpenType');
}

@font-face
{
    font-family: "SourceSansPro-ExtraLight";
    src: url('../fonts/SourceSansPro-ExtraLight.otf') format('OpenType');
}

@font-face
{
    font-family: "SourceSansPro-Regular";
    src: url('../fonts/SourceSansPro-Regular.otf') format('OpenType');
}


@mixin flex-container($flex-direction,$flex-wrap,$justify-content,$align-items){
    display:  -webkit-box;
    display:     -moz-box;
    display:  -ms-flexbox;
    display: -webkit-flex;
    display:         flex;


    -webkit-flex-flow:$flex-direction $flex-wrap;
       -moz-flex-flow:$flex-direction $flex-wrap;
        -ms-flex-flow:$flex-direction $flex-wrap;
            flex-flow:$flex-direction $flex-wrap;


    -webkit-justify-content:$justify-content;
       -moz-justify-content:$justify-content;
        -ms-justify-content:$justify-content;
            justify-content:$justify-content;//alignment along the main axis

    -webkit-align-items:$align-items;
       -moz-align-items:$align-items;
        -ms-align-items:$align-items;
            align-items:$align-items;//alignment along the cross axis
}

@mixin flex-element($flex-grow,$flex-shrink,$flex-basis){
    -webkit-box-flex:$flex-grow $flex-shrink $flex-basis;
       -moz-box-flex:$flex-grow $flex-shrink $flex-basis;
        -webkit-flex:$flex-grow $flex-shrink $flex-basis;
            -ms-flex:$flex-grow $flex-shrink $flex-basis;
                flex:$flex-grow $flex-shrink $flex-basis;
}

@mixin transition($args...){
    -webkit-transition:$args;
       -moz-transition:$args;
         -o-transition:$args;
            transition:$args;
}

@mixin transform($args...){
    -webkit-transform:$args;
       -moz-transform:$args;
            transform:$args;
}

@mixin animation($animations...){
    -webkit-animation:$animations;
       -moz-animation:$animations;
         -o-animation:$animations;
            animation:$animations;
}

$link-color:rgb(170, 170, 170);
$link-hover-color:lighten($link-color,60%);
$banner-back-color:rgb(48,48,48);
$banner-fore-color:rgb(170, 170, 170);

$exlight-font:"SourceSansPro-ExtraLight", "华文细黑";
$light-font:"SourceSansPro-Regular","华文细黑";
$normal-font:'Exo-Regular', "华文细黑";

@mixin Cuties-background{
    background: rgb(48,48,48); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(48,48,48,1) 0%, rgba(197,166,219,1) 98%, rgba(48,48,48,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(48,48,48,1)), color-stop(98%,rgba(197,166,219,1)), color-stop(100%,rgba(48,48,48,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(48,48,48,1) 0%,rgba(197,166,219,1) 98%,rgba(48,48,48,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(48,48,48,1) 0%,rgba(197,166,219,1) 98%,rgba(48,48,48,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(48,48,48,1) 0%,rgba(197,166,219,1) 98%,rgba(48,48,48,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(48,48,48,1) 0%,rgba(197,166,219,1) 98%,rgba(48,48,48,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#303030',GradientType=0 ); /* IE6-9 */
}
@mixin Mu-background{
    background: rgb(48,48,48); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(48,48,48,1) 0%, rgba(123,189,224,1) 98%, rgba(48,48,48,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(48,48,48,1)), color-stop(98%,rgba(123,189,224,1)), color-stop(100%,rgba(48,48,48,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(48,48,48,1) 0%,rgba(123,189,224,1) 98%,rgba(48,48,48,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(48,48,48,1) 0%,rgba(123,189,224,1) 98%,rgba(48,48,48,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(48,48,48,1) 0%,rgba(123,189,224,1) 98%,rgba(48,48,48,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(48,48,48,1) 0%,rgba(123,189,224,1) 98%,rgba(48,48,48,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#303030',GradientType=0 ); /* IE6-9 */
}

.exlight-font{
    font-family:$exlight-font;
}
body{
    @include flex-container(column,nowrap,space-between,strech);
    background:lighten($banner-back-color,50%);
    font-size:18px;
    padding:0;
    margin:0;
    height:100%;
    font-family:$normal-font;
}


a{
    &:link{
        color:$link-color;
        text-decoration:none;
    }
    &:visited{
        color:$link-color;
    }
    &:hover{
        color:$link-hover-color;
        text-shadow:0 0 10px #cceeff;
    }
    &:active{
        color:$link-hover-color;
    }
}


#navbar{
    @include flex-element(0,0,auto);
    @include flex-container(row,nowrap,space-between,center);
    z-index:9100;
    width:auto;
    background:$banner-back-color;
    height:2em;
}
#title{
    @include flex-element(1,0,3);
    margin:{
        right:auto;
        left:1em;
        top:auto;
        bottom:auto;
    }
    color:white;
}

#nav-links{
    @include flex-container(row,wrap,center,strech);
    @include flex-element(0,0,1);
    text-align:center;
    a{
        @include flex-element(1,0,auto);
        @include transition(all 0.3s ease);
        padding:0 1em;
        position:relative;
        &:before , &:after{
            position:absolute;
            opacity:0;
            @include transition(all 0.3s ease);
        }
        &:before{
            left:1em;
            content:">";
        }
        &:after{
            right:1em;
            content:"<";
        }

        &:hover{
            &:before , &:after{
                opacity:1;
            }
            &:before{
                left:0.1em;
                content:">";
            }
            &:after{
                right:0.1em;
                content:"<";
            }
        }
    }
}
#content{
    @include flex-element(1,0,auto);
    @include flex-container(row,wrap,center,center);

    background: rgb(176,176,176); /* Old browsers */

    cursor:pointer;
    .summary{
        h1{
            text-shadow: 0 0 1px rgba(255,255,255,0),0px 0px 5px rgba(38, 170, 255,0);
            font-size:2em;
            @include transform(rotateX(0deg));
            @include transition(all ease 0.6s 0.4s);
        }
        h2{
            @include transition(all ease 0.3s 0.8s);
        }
        h2:after{
            display:inline-block;
            padding:0 1em;
            content:"> > >";
            color:white;
            text-shadow: 0 0 1px rgba(255,255,255,1),0px 0px 5px rgba(38, 170, 255,1);
            height:1em;
            @include transform(translate3d(-1em,0,0) rotateX(90deg));
            opacity:0;
            @include transition(all linear 0.2s 1.3s);
        }
    }
}
#content[data-idx="0"]{@include Cuties-background;}
#content[data-idx="1"]{@include Mu-background;}
#content:hover{
    .summary{
        h1{
            color: rgba(148, 213, 255, 1);
            text-shadow: 0 0 1px rgba(255,255,255,1),0px 0px 5px rgba(38, 170, 255,1);
            font-size: 4em;
            @include transform(rotateX(360deg));
        }
        h2{
            color: white;
        }
        h2:after{
            @include transform(translate3d(0em,0,0) rotateX(0deg));
            opacity:1;
            @include animation(arrowflash 1.6s 1.6s infinite);
        }
    }
}

#large-view-container{
    @include flex-element(0,0,auto);
    height:auto;
}

.large-view-pic{
    height:300px;
    display:none;
}
.large-view-pic.active{
    display:block;
}
.summary{
    @include flex-element(0,0,auto);
    @include flex-container(row,nowrap,center,center);
    @include transition(all 0.5s ease);
    margin-left:2em;
    width:auto;
    display:none;
    &.active{
        display: block;
        margin-left:2em;
    }
}
#small-view-container{
    @include flex-element(0,0,auto);
    @include flex-container(row,nowrap,space-around,center);
    @include transition(all 0.3s ease);
    color:$banner-fore-color;
    z-index:9000;
    padding:0;
    margin:0;
    width:auto;
    background:darken($banner-back-color,5%);
    &:hover{
        background:$banner-back-color;
    }
}
.small-view{
    @include flex-element(1,1,auto);
    @include flex-container(row,wrap,center,center);
    @include transition(all 0.3s ease);
    text-align:center;
    padding:1em 0;
    img{
        max-height:60px;
        margin:{
            left:0.5em;
            right:0.5em;
        }
    }
    &:hover{
        color:lighten($banner-fore-color,50%);
        background:lighten($banner-back-color,10%);
    }
    &.active{
        color:darken($banner-fore-color,50%);
        background:lighten($banner-back-color,50%);
    }
}

@-webkit-keyframes arrowflash{
    0%{
        @include transform(scale(1) translate3d(0em,0,0));
        opacity:0;
    }
    40%{
        @include transform(scale(1) translate3d(0em,0,0));
        opacity:1;
    }
    50%{
        color:white;
        @include transform(scale(0.8) translate3d(0em,0,0));
    }
    60%{
        color: rgba(148, 213, 255, 1);
        @include transform(scale(1) translate3d(0em,0,0));
        opacity:1;
    }
    100%{
        color:white;
        @include transform(scale(1) translate3d(2em,0,0));
        opacity:0;
    }
}
@-moz-keyframes arrowflash{
    0%{
        @include transform(scale(1) translate3d(0em,0,0));
        opacity:0;
    }
    40%{
        @include transform(scale(1) translate3d(0em,0,0));
        opacity:1;
    }
    50%{
        color:white;
        @include transform(scale(0.8) translate3d(0em,0,0));
    }
    60%{
        color: rgba(148, 213, 255, 1);
        @include transform(scale(1) translate3d(0em,0,0));
        opacity:1;
    }
    100%{
        color:white;
        @include transform(scale(1) translate3d(2em,0,0));
        opacity:0;
    }
}
@keyframes arrowflash{
    0%{
        @include transform(scale(1) translate3d(0em,0,0));
        opacity:0;
    }
    40%{
        @include transform(scale(1) translate3d(0em,0,0));
        opacity:1;
    }
    50%{
        color:white;
        @include transform(scale(0.8) translate3d(0em,0,0));
    }
    60%{
        color: rgba(148, 213, 255, 1);
        @include transform(scale(1) translate3d(0em,0,0));
        opacity:1;
    }
    100%{
        color:white;
        @include transform(scale(1) translate3d(2em,0,0));
        opacity:0;
    }
}
@import "style-responsive.scss"